<template>
  <div style="position: relative">
    <Home ref="Home" :style="{ height: height }" :wdPos="wandianzuobiao" :line="line"></Home>
    <div class="order">
      <div class="billTop">
        <img src="../../assets/images/orderTracking/icon_shoujiandan.png" alt="" />
        <span>承运单号：{{ list.billNo }}</span>
      </div>
      <div class="billMsg">
        <nut-steps direction="vertical" :current="list.destinationAddress">
          <nut-step title="始发地" :content="list.startAddress">发</nut-step>
          <nut-step title="目的地" :content="list.destinationAddress">收</nut-step>
        </nut-steps>
      </div>
      <div class="btnBox">
        <nut-button type="info" class="btn" @click="gotoPage">运单详情</nut-button>
      </div>
    </div>
  </div>
</template>
<script>
import { transform, fromLonLat } from "ol/proj";
import OlFeature from "ol/Feature";
import LineString from "ol/geom/LineString";
import { Style, Icon, Stroke } from "ol/style";
import Home from "./components/mymap.vue"; //显示要素
import useStore from "../../store/myOrder";
import useUserInfoStore from "../../store/user";
import { $post, $get } from "../../@api/index";
import Taro from "@tarojs/taro";

// import {getLogisticsInfo,getPos,getRoute} from "@/api/home"
export default {
  components: { Home },
  data() {
    return {
      height: "100vh",
      expand: false,
      list: "",
      wdPos: [],
      centerPos: "",
      startAddress: "",
      endAddress: "",
      startPoint: "",
      endPoint: "",
      plan: "",
      line: "",
      wandianzuobiao: [
        {
          pos: [119.27345, 26.04769],
          // pos: this.endPoint,
          name: "my",
          // goodInfo: [{ goodsName: "我在这里" }],
        },
        {
          pos: [119.2857, 26.07816],
          // pos: this.startPoint,
          name: "to",
          // goodInfo,
        },
      ],
      routeInformation: "", //物流实时信息
    };
  },
  created() {
    var store = useStore();
    var userStore = useUserInfoStore();

    //   this.$refs.Home.aa();

    this.list = store.trackingList;
    console.log(this.list, "this.list");

    $get("/selfmachine-system/branch/particulars", {
      btcId: userStore.userInfo.btcId,
      branchCompanyNo: this.list.startBranch,
    }).then((res) => {
      if (res.data.code == 200) {
        this.startAddress = res.data.data;
        $get("/selfmachine-system/branch/particulars", {
          btcId: userStore.userInfo.btcId.btcId,
          branchCompanyNo: this.list.destinationBranch,
        }).then((aaa) => {
          if (aaa.data.code == 200) {
            this.endAddress = aaa.data.data;
            $get("/selfmachine-system/branch/navigationRoute", {
              source:
                this.startAddress.province +
                this.startAddress.city +
                this.startAddress.administrativeDivision +
                this.startAddress.address,
              destination:
                this.endAddress.province +
                this.endAddress.city +
                this.endAddress.administrativeDivision +
                this.endAddress.address,
            }).then((bbb) => {
              if (bbb.data.code == 200) {
                this.startPoint = bbb.data.data.route.origin.split(",");
                this.endPoint = bbb.data.data.route.destination.split(",");
                this.lineList = [];
                this.plan = bbb.data.data.route.paths[0];
                //驾车的方案
                let distance = this.plan.distance;
                var steps = this.plan.steps;
                var lineListNumber = []; //保存每条线路的坐标连线/
                for (var j = 0; j < steps.length; j++) {
                  //每个方案的具体路段
                  var polyline = steps[j].polyline; //每个路段具体的坐标点
                  var lonAndLats = polyline.split(";");
                  if (lonAndLats.length > 1) {
                    for (var t = 0; t < lonAndLats.length - 1; t++) {
                      var start = lonAndLats[t].split(",");
                      var end = lonAndLats[t + 1].split(",");
                      for (var mm = 0; mm < start.length; mm++) {
                        //接口返回的集合中的数据是字符串，转换为数字
                        start[mm] = Number(start[mm]);
                      }
                      for (var nn = 0; nn < end.length; nn++) {
                        end[nn] = Number(end[nn]);
                      }
                      if (j == 0 && t == 0) {
                        //将起点和第一点连起来
                        var startline = this.insertLine(this.startPoint, start);
                        lineListNumber.push(startline);
                      }
                      var line = this.insertLine(start, end);
                      lineListNumber.push(line);
                    }
                  }
                }
                this.line = lineListNumber;
                this.wandianzuobiao = [
                  {
                    // pos: [119.27345, 26.04769],
                    pos: this.endPoint,
                    name: "my",
                    // goodInfo: [{ goodsName: "我在这里" }],
                  },
                  {
                    // pos: [119.2857, 26.04723],
                    pos: this.startPoint,
                    name: "to",
                    // goodInfo,
                  },
                ];

                setTimeout(() => {
                  console.log(77777);
                  this.$refs.Home.aa();
                }, 500);
              }
            });
          }
        });
      }
    });
    // this.wdPos.push([
    //   this.$store.state.shouhuoaddressinfo.localX,
    //   this.$store.state.shouhuoaddressinfo.localY,
    // ]);
    // this.centerPos = [
    //   this.$store.state.shouhuoaddressinfo.localX,
    //   this.$store.state.shouhuoaddressinfo.localY,
    // ];
    // this.list = this.$route.query.list;
    console.log(this.list.billNo, "this.list.billNo");
    $post(
      "/selfmachine-system/logistics/getLogisticsInfo/" + this.list.billNo
        ? this.list.billNo
        : this.list.billNos,
      { billNo: this.list.billNo }
    ).then((res) => {
      if (res.data.code == 200) {
        if (!res.data.data.trajectorys || res.data.data.trajectorys.length) {
          this.routeInformation = "";
        } else {
          this.routeInformation = res.data.data.trajectorys;
        }
      } else {
        // this.$toast.fail("获取物流信息失败");
      }
    });
  },
  methods: {
    gotoPage() {
      var store = useStore();
      store.orderList = this.list;
      Taro.navigateTo({
        url: "/pages/myOrder/order",
      });
    },
    //下单时间过滤
    timeFilter(item) {
      return this.timeFilter(item);
    },
    //时间过滤
    timeFilter(time) {
      var date = new Date(time);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      // console.log(Y+M+D+h+m+s);
      // return Y + M + D + h + m + s;

      return Y + M + D + h + m + s;
    },
    transformPosition(point) {
      let Location;

      Location = transform(point, "EPSG:4326", "EPSG:3857");

      return Location;
    },
    //插入路线
    insertLine(startPoint, endPoint) {
      let startLocation, endLocation;
      startLocation = this.transformPosition(startPoint);
      endLocation = this.transformPosition(endPoint);
      var line = new OlFeature({
        geometry: new LineString([startLocation, endLocation]),
      });
      line.setStyle(
        new Style({
          stroke: new Stroke({
            width: 5,
            color: "#07C160",
          }),
        })
      );
      return line;
    },
    statusFilter(status) {
      if (status == 1) {
        return "待确认";
      } else if (status == 2) {
        return "待支付";
      } else if (status == 3) {
        return "未发货";
      } else if (status == 4) {
        return "运输中";
      } else if (status == 5) {
        return "待签收";
      } else if (status == 6) {
        return "已完成";
      }
      // else if (status == 7) {
      //   return "部分签收";
      // } else if (status == 9) {
      //   return "已完成";
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.order {
  width: 100%;
  position: absolute;
  bottom: 0;

  .billTop {
    background: linear-gradient(96deg, #cce0ff 0%, #ffffff 100%);
    width: 702rpx;
    border-radius: 16px 16px 0px 0px;
    height: 72rpx;
    margin: 0 auto;
    font-size: 24px;
    line-height: 72rpx;
    padding-left: 24rpx;
  }

  .billMsg {
    background: white;
    padding: 24rpx;
  }

  .btnBox {
    background: white;
    width: 100%;
    padding: 30px;

    .btn {
      width: 90%;
    }
  }
}
</style>
